<template>
  <el-select
    filterable 
    :filter-method="fetch"
    @change="handleChange"
    :mode="mode"
    :value="value"
  >
    <el-option
      v-for="item in data"
      :key="item"
      :value="item"
    >
      {{ item  }}
    </el-option>
  </el-select>
</template>

<script>
import { getData } from "@/utils/http";
import { METADATA_CONFIG, URL_MAP } from "@/config/config";

export default {
  data() {
    return {
      data: [],
      value: "",
    };
  },
  model: {
    prop: "project",
    event: "change",
  },
  props: {
    project: {
      type: [String, Array],
      default: null,
    },
    mode: {
      type: String,
      default: 'default'
    }
  },
  methods: {
    fetch(value) {
      getData(URL_MAP.METADATA_LIST, { name: value , type: METADATA_CONFIG.RECORD})
        .then((data) => {
          if (data.code === 0) {
            this.data = data.data.data
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.$message.error("获取数据失败");
        })
        .finally(() => {});
    },
    handleChange(value) {
      this.value = value;
      this.$emit("change", this.value);
    },
  },
  mounted() {
    this.value = this.project
    this.fetch(this.project)
  },
};
</script>

<style>
</style>